<template>
	<div id="spread">
		<p class="Title">邀请商家获得奖励</p>
		<div class="spread_1">
			<div class="spread_title">
				<span>1</span>分享方式1：
				<p>复制您的专用邀请链接，邀请好友成为商家发布活动，即可获得邀请奖励</p>
			</div>
			<div class="way1">
				{{way1}}{{way2}}
			</div>
			<input @click="copyUrl1()" class="copy" type="button" value="复制链接" />
			<div class="spread_title">
				<span>2</span>分享方式2：
				<p>将下面邀请码发送给受邀商家</p>
			</div>
			<div class="way2">
				{{way2}}
			</div>
			<input @click="copyUrl2()" class="copy" type="button" value="复制邀请码" />
		</div>
		<p class="Title">邀请商家奖励机制</p>
		<div class="spread_2">
			<ul>
				<li>（1）邀请的商家，首次成功发布赶紧试上任意一个活动类型，即可奖励 <span>30 元</span>/位；</li>
				<li>（2）每介绍一位商家入驻成为VIP即可获得奖励 <span>198 元</span>；</li>
			</ul>
		</div>
		<p class="Title">邀请常见问题</p>
		<div class="spread_3">
			<p class="problem">问：怎样才算邀请成功？</p>
			<p class="answer">答：邀请的商家，当月成功发布赶紧试平台试用任一活动，或是邀请的商家充值成为赶紧试会员，即计为邀请成功；</p>
			<p class="problem">问：每次申请成功都奖励金币么？</p>
			<p class="answer">答：邀请的用户只有在首次发布成功或成为赶紧试会员才享受邀请奖励；</p>
			<p class="problem">问：邀请的奖励何时发放？</p>
			<p class="answer">答：邀请的用户只要完成以上奖励机制中的任意一种，奖励即刻发放。</p>
		</div>
	</div>
</template>

<script>
export default{
	name: 'spread',
	data: function(){
		return{
			way1: '我已经在赶紧试发布过很多活动，效果好，安全，性价比高。试客先货比、浏览、收藏、加购，商家再挑选试客下单，都是普通买家群体，质量高。我把赶紧试推荐给你，点击链接直达接直达http:\/\/www.ganjinshi.com\/?invite=',
			way2: ''
		}
	},
	methods:{
		copyUrl1:function(){
	        var Url=this.way1+this.way2;
	        var oInput = document.createElement('input');
	        oInput.value = Url;
	        document.body.appendChild(oInput);
	        oInput.select(); // 选择对象
	        document.execCommand("Copy"); // 执行浏览器复制命令
	        oInput.className = 'oInput';
	        oInput.style.display='none';
	        this.$alert('1','复制成功');
	   },
		copyUrl2:function(){
	        var Url=this.way2;
	        var oInput = document.createElement('input');
	        oInput.value = Url;
	        document.body.appendChild(oInput);
	        oInput.select(); // 选择对象
	        document.execCommand("Copy"); // 执行浏览器复制命令
	        oInput.className = 'oInput';
	        oInput.style.display='none';
	        this.$alert('1','复制成功');
	   },
	},
	created:function(){
		var _this = this;
		_this.$axios.post('/agent/info/show').then(function(res){
		    var data = res.data;
		    if(data.message=="succ"){
		    	data = data.result;
		    	_this.way2 = data.extendsCode;
		    	_this.user = data.nickName;
	    		_this.vip = data.memberStatus;
		    }else{
		    	_this.$alert('2',data.result);
		    }
		}).catch(function (error) {
		    console.log(error);
		});
	}
}
</script>

<style scoped>
#spread{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
.spread_1{
	border-top: 1px solid #E6E6E6;
	margin-top: 20px;
	margin-bottom: 20px;
}
.spread_title{
	font-size: 16px;
	color: #545454;
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.spread_title>span{
	font-size: 14px;
	background-color: #545454;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	color: #FFFFFF;
	display: block;
	text-align: center;
	line-height: 18px;
	margin-right: 5px;
}
.spread_title p{
	font-size: 14px;
	color: #FF464E;
	padding-top: 5px;
}
.way1{
	width: 540px;
	border: 1px solid #fe8c0d;
	padding: 15px 20px;
	box-sizing: border-box;
	line-height: 25px;
	text-align: justify;
	margin-left: 23px;
	margin-top: 20px;
}
.way2{
	padding: 10px 20px;
	width: 250px;
	border: 1px solid #fe8c0d;
	box-sizing: border-box;
	text-align: center;
	margin-left: 23px;
	margin-top: 20px;
}
.copy{
	width: 150px;
	height: 40px;
	background: linear-gradient(to right,#f3c767,#fe8c0d);
	border: none;
	border-radius: 3px;
	color: #FFFFFF;
	font-size: 16px;
	margin-left: 23px;
	margin-top: 20px;
}
.spread_2{
	border-top: 1px solid #E6E6E6;
	padding: 20px 23px;
	padding-left: 43px;
	box-sizing: border-box;
	margin-top: 15px;
	margin-bottom: 10px;
}
.spread_2 ul li{
	list-style: disc;
	color: #545454;
}
.spread_2 ul li span{
	font-weight: 600;
	color: #FF464E;
}
.spread_2 ul li:first-child{
	margin-bottom: 15px;
}
.spread_3{
	padding: 20px 23px;
	padding-bottom: 0;
	border-top: 1px solid #E6E6E6;
	margin-top: 15px;
}
.spread_3 .problem{
	color: #545454;
	margin-bottom: 15px;
}
.spread_3 .answer{
	color: #808080;
	margin-bottom: 15px;
}
</style>